<template>
  <div class="container">
    <div class="header">
      <div class="title">多米惠选 </div>
      <div class="subtitle">{{ currentDate }}</div>
      <dv-decoration-5 style="width: 100%; height: 40px" />
    </div>
    <main class="main">
      <div class="left">
        <dv-border-box-1 class="left-top">
          <left-top :order-data="order_data" />
        </dv-border-box-1>
        <dv-border-box-9 class="left-midden">
          <left-midden :recharge-data="recharge_data" />
        </dv-border-box-9>
        <div class="left-bottom">
          <left-bottom :goods-category-data="goods_category_data" />
        </div>
      </div>
      <div class="center">
        <div class="center-top">
          <midden-top :user-data="user_data" />
        </div>
        <div class="center-midden">
          <midden-center :total-amount-data="total_amount_data" />
        </div>
        <div class="center-bottom">
          <dv-border-box-13>
            <midden-bottom :coupon-data="coupon_data" />
          </dv-border-box-13>
        </div>
      </div>
      <div class="right">
        <dv-border-box-9 class="right-top">
          <right-top :shangbang-data="shangbang_data" />
        </dv-border-box-9>

        <div class="right-midden">
          <right-midden :butie-data="butie_data" />
        </div>
        <div class="right-bottom">
          <right-bottom :belong-data="belong_data" />
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import LeftTop from "../components/left/left-top.vue";
import LeftMidden from "../components/left/left-midden.vue";
import LeftBottom from "../components/left/left-bottom.vue";

import MiddenTop from "../components/midden/midden-top.vue";
import MiddenCenter from "../components/midden/midden-center.vue";
import MiddenBottom from "../components/midden/midden-bottom.vue";

import RightTop from "../components/right/right-top.vue";
import RightMidden from "../components/right/right-midden.vue";
import RightBottom from "../components/right/right-bottom.vue";

export default {
  components: {
    LeftTop,
    LeftMidden,
    LeftBottom,
    MiddenTop,
    MiddenCenter,
    MiddenBottom,
    RightTop,
    RightMidden,
    RightBottom,
  },
  data() {
    return {
      currentDate: "",

      order_data: {}, //惠选交易金额
      recharge_data: {}, // 充值金额汇总
      goods_category_data: [], //惠选产品分类

      user_data: {}, //用户数据
      total_amount_data: {
        total_amount_list: [],
      }, //总成交易额
      coupon_data: {}, //代金券、优惠券金额

      shangbang_data: {
        cate_list: [],
      }, //商帮交易额

      butie_data: {
        data_list: [],
      }, //补贴
      belong_data: [], //分类
    };
  },
  created() {
    this.requestData();
  },
  mounted() {
    const zou = [
      "星期日",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ];

    this.$nextTick(() => {
      setInterval(() => {
        const myDate = new Date();
        const year = myDate.getFullYear();
        const month = myDate.getMonth() + 1;
        const day = myDate.getDate();
        const week = myDate.getDay();
        const h = myDate.getHours();
        const min = this.FnZero(myDate.getMinutes());
        const s = this.FnZero(myDate.getSeconds());

        this.currentDate = `${year}-${month}-${day} ${h}: ${min}`;
      }, 0);
    });

    setInterval(() => {
      this.requestData();
    }, 20000);
  },
  methods: {
    FnZero(num) {
      if (num < 10) {
        return "0" + num;
      }
      return num;
    },
    requestData() {
      this.$http({
        method: "GET",
        url: "https://duomi.bigchun.com/api/report/data",
        params: {
          token: "",
        },
      }).then(({ data }) => {
        const res = data.data;
        this.order_data = res.order_data;
        this.recharge_data = res.recharge_data;
        this.goods_category_data = res.goods_category_data.list;
        this.user_data = res.user_data;
        this.total_amount_data = res.total_amount_data;
        this.coupon_data = res.coupon_data;
        this.shangbang_data = res.shangbang_data;
        this.butie_data = res.butie_data;
        this.belong_data = res.belong_data.data_list;
      });
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  height: 100vh;
  background: url("../assets/pageBg.png");
  background-size: cover;
  color: #fff;
  overflow: auto;
  .header {
    text-align: center;
    background: url("../assets/topBg.png") no-repeat;
    background-position: 100% 20%;
    .title {
      font-size: 34px;
      padding-top: 8px;
      padding-bottom: 10px;
    }
    .subtitle {
      font-size: 26px;
      position: relative;
      top: 8px;
    }
  }
  .main {
    display: flex;
    //height: calc(100% - 20px);
    overflow: hidden;
    .left {
      display: flex;
      flex-direction: column;
      //justify-content: space-between;
      height: 100%;
      margin-left: 22px;
      margin-right: 24px;
      overflow: hidden;
      > div {
        width: 413px;
        height: 230px;
        &:nth-of-type(3){
          background-color: #0b2c47;
        }
       
        border-radius: 10px;
        margin-bottom: 18px;
      }
      > .left-top {
        height: 202px;
      }
      > .left-midden {
        height: 320px;
      }

      .left-bottom {
        height: 296px;
      }
    }
    .center {
      width: 1000px;
      height: 100%;
      //background-color: pink;
      .center-bottom {
        width: 100%;
        height: 201px;
      }
    }
    .right {
      width: 410px;
      display: flex;
      flex-direction: column;
      height: 100%;
      margin-left: 30px;
      margin-right: 40px;
      overflow: hidden;
      .right-top,
      .right-bottom {
        height: 310px;
      }
      .right-bottom {
        background: #0b2c47;
        border-radius: 10px;
        margin-top: 16px;
      }
      .right-midden {
        width: 100%;
        height: 202px;
        background: #0b2c47;
        border-radius: 10px;
        margin-top: 16px;
      }
    }
  }
}
</style>
